<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>媒体对象--媒体对象的嵌套</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<!--
这里有三个媒体对象，只不过是一个嵌套在另一个的里面。
那么在Bootstrap框架中的媒体对象也具备这样的功能，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”，
-->
<div class="media">
  <a class="pull-left" href="#">
		<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">我是大漠</h4>
		<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
    <!--嵌套的媒体对象-->
		<div class="media">
			<a class="pull-left" href="#">
				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
			</a>
			<div class="media-body">
				<h4 class="media-heading">慕课网</h4>
				<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
        <!--嵌套的媒体对象-->
				<div class="media">
					<a class="pull-left" href="#">
						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
					</a>
					<div class="media-body">
						<h4 class="media-heading">W3cplus</h4>
						<div>W3cplus站上还有很多教程....</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>